<template>
  <div class="article-page">
    <div class="bigbox">
      <div v-if="headShow">
        <!-- 头部搜索组件 -->
        <header-search @search="handlerSearch" @reset="handlerReset">
          <template #search>
            <el-form-item label="标题">
              <el-input
                v-model.trim="queryData.title"
                clearable
                placeholder="请输入标题"
              />
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="queryData.cateid" placeholder="请选择" clearable>
                <el-option
                  v-for="item in optionsList"
                  :key="item.key"
                  :value="item.id"
                  :label="item.catename"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <template>
                <div class="block">
                  <el-date-picker
                    v-model="time"
                    value-format="timestamp"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    size="small"
                    style="width: 240px"
                  />
                </div>
              </template>
            </el-form-item>
          </template>
        </header-search>
      </div>
      <!-- 工具栏组件 -->
      <header-button
        :head-show.sync="headShow"
        :check-data="tableEle"
        @open="$router.push('/content_article/add')"
        @loading="handlerLoading"
      />
      <!-- 表格组件 -->
      <my-table
        :table-data="tableData"
        :table-ele="tableEle"
        :table-index="tabindex"
        :loading="loading"
        @del="handlerDel"
        @edit="handlerEdit"
      >
        <template #pic="{row}">
          <img :src="$ImgUrl+row.pic" :style="{height:'80px',width:'120px'}" alt="">
        </template>
        <template #ishot="{row}">
          <el-switch :value="row.ishot" :active-value="1" :inactive-value="0" />
        </template>
        <template #istop="{row}">
          <el-switch :value="row.ishot" :active-value="1" :inactive-value="0" />
        </template>
        <template #status="{row}">
          <el-tag v-if="row.status===0">待审核</el-tag>
          <el-tag v-else-if="row.status===1"> 草稿箱</el-tag>
          <el-tag v-else-if="row.status===2">已发布</el-tag>
          <el-tag v-else-if="row.status===3">已删除</el-tag>
        </template>
      </my-table>
      <!-- 分页组件 -->
      <lay-page
        :limit.sync="queryData.limit"
        :page.sync="queryData.page"
        :count="count"
      />

    </div>
  </div>
</template>

<script>
import { getIndexInfo } from '@/api/home'
import { delArticleApi, getArticleListApi } from '@/api/article'
export default {
  name: 'ArticlePage',
  components: {

  },
  data() {
    return {
      headShow: true,
      tabindex: 1, // 0有索引 1没有
      optionsList: [],
      cateId: '',
      time: [],
      queryData: {
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
        page: 1,
        limit: 10
      },
      tableData: [],
      tableEle: [
        { name: 'ID', prop: 'id', template: false, isckecked: true },
        { name: '标题', prop: 'title', template: false, isckecked: true },
        { name: '分类名', prop: 'catename', template: false, isckecked: true },
        { name: '图片', prop: 'pic', template: true, isckecked: true },
        { name: '创建时间', prop: 'create_date', template: false, isckecked: true },
        { name: '是否推荐', prop: 'ishot', template: true, isckecked: true },
        { name: '是否置顶', prop: 'istop', template: true, isckecked: true },
        { name: '文章状态', prop: 'status', template: true, isckecked: true }
      ],
      count: 0,
      loading: false
    }
  },
  watch: {
    'queryData.limit'(val) {
      this.initData()
    },
    'queryData.page'(val) {
      this.initData()
    }
  },
  created() {
    this.getAllCate()
    this.initData()
  },
  methods: {
    // 获取文章标签列表
    async getAllCate() {
      const res = await getIndexInfo()
      this.optionsList = res.all_cate
    },
    // 获取文章列表
    async initData() {
      const res = await getArticleListApi(this.queryData)
      // this.tableData = res.data
      this.tableData = res.data.map(item => {
        // console.log(item.pic.split(',')[0])
        item.pic = item.pic.split(',')[0]

        return item
      })
      this.count = res.count
    },
    // 搜索
    handlerSearch() {
      if (this.time.length !== 0) {
        this.queryData.start_time = this.time[0]
        this.queryData.end_time = this.time[1]
      }
      this.initData()
    },
    // 重置
    handlerReset() {
      this.queryData = {
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
        page: 1,
        limit: 10
      }
      this.time = []
      this.initData()
    },
    // 编辑
    handlerEdit(id) {
      this.$router.push('/content_article/edit/' + id)
    },
    // 删除
    async  handlerDel(id) {
      try {
        await this.$confirm('确定删除嘛')
        await delArticleApi(id)
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.page > 1) this.queryData.page--
        this.initData()
      } catch (err) {
        console.log(err)
      }
    },
    // 设置刷新loading
    async handlerLoading() {
      this.tableData = []
      this.loading = true
      await this.initData()
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.article-page {
  padding: 10px;

  background-color: #eaedf1;
  .bigbox {
      padding: 20px;
        box-sizing: border-box;
    background-color: #fff;
  }

}
</style>
